<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp1800 template" content="My 1800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Library CSS CDN go here -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- Other libraries go here -->

    <!-- Link to styles of your own -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-secondary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img src="images/logo1.png" height="50px">
          Electric car</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link " aria-current="page" href="main2.html">select</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="main3.html">upkeep</a>
            </li>
            <li class="nav-item">
              
              <button class="btn btn-primary" onclick="Buy()" type="button" >Buy </button>
            </li>
            <li class="nav-item">
              <a class="nav-link " aria-disabled="true"  href="main1.html">After sale</a>
            </li>
            <li class="nav-item">
              <button class="btn btn-primary" onclick="login()" type="button" >Login in</button>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <script src="scripts/script.js"></script>
 

    <div class="d-flex gap-2 justify-content-center py-5">
        <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
          <span class="px-1">Ordering Process</span>
          <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
        </span>
        <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
          <span class="px-1">Buyer Notice</span>
          <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
        </span>
        <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
          <span class="px-1">Order Form</span>
          <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
        </span>
      </div>
    
      <div class="container"> 
        <h1>Add Car's information</h1> 
        <form id="newHikeForm"> 
          <div class="form-group"> 
            <label for="nameInput">Vehicle model</label> 
            <input type="text" class="form-control" id="nameInput" required> 
          </div> 
          <div class="form-group"> 
            <label for="distanceInput">Seating capacity</label> 
            <input type="text" class="form-control" id="distanceInput" required> 
          </div> 
          <div class="form-group"> 
            <label for="locationInput">Color</label> 
            <input type="text" class="form-control" id="locationInput" required> 
          </div> 
          <button type="submit" class="btn btn-primary">Add Hike</button> 
        </form> 
      </div>

      <script src="./scripts/skeleton.js"></script>
      <script src="./scripts/postHike.js"></script>

    <div class="card-group">
        <div class="card">
          <img src="images/xuan1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">1.Sign a purchase contract</h5>
            <p class="card-text">This is the first and important step in buying a car, as it involves the buyer's rights and interests</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <img src="images/xuan2.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">2.Payment</h5>
            <p class="card-text">This is the second step in buying a car. We support multiple payment methods to serve you more quickly and conveniently,</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <img src="images/xuan3.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">3.Picking up the car</h5>
            <p class="card-text">Step 3: After completing the first two steps, schedule a pick-up date and we will notify you to pick up your own car.</p>
          </div>
          <div class="card-footer">
            <small class="text-body-secondary">Last updated 3 mins ago</small>
          </div>
        </div>
      
    </div>
      <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
        <button class="btn btn-primary" type="button" disabled>Buy Notice</button>
      </span>
     
      <div class="list-group">
        <label class="list-group-item d-flex gap-2">
          <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
          <span>
            First 
            <small class="d-block text-body-secondary">If you have any doubts about the color or model of the car, you can consult customer service</small>
          </span>
        </label>
        <label class="list-group-item d-flex gap-2">
          <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
          <span>
            Second 
            <small class="d-block text-body-secondary">If payment is not completed, the personal center will no longer display order information</small>
          </span>
        </label>
        <label class="list-group-item d-flex gap-2">
          <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
          <span>
            Third 
            <small class="d-block text-body-secondary">If purchasing online, a contract needs to be signed through an offline area</small>
          </span>
        </label>
      </div>
    </div>
    
    <div class="p-4">
      <h4 class="fst-italic">Archives</h4>
      <ol class="list-unstyled mb-0">
        <li><a href="#">March 2021</a></li>
        <li><a href="#">February 2021</a></li>
        <li><a href="#">January 2021</a></li>
        <li><a href="#">December 2020</a></li>
        <li><a href="#">November 2020</a></li>
        <li><a href="#">October 2020</a></li>
        <li><a href="#">September 2020</a></li>
        <li><a href="#">August 2020</a></li>
        <li><a href="#">July 2020</a></li>
        <li><a href="#">June 2020</a></li>
        <li><a href="#">May 2020</a></li>
        <li><a href="#">April 2020</a></li>
      </ol>
    </div>

    <div class="container">
        <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
          <div class="col-md-4 d-flex align-items-center">
            <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
              <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
            </a>
            <span class="mb-3 mb-md-0 text-body-secondary">&copy; 2024 xueyan_zhang</span>
          </div>
      
          <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
            <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
            <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
            <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
          </ul>
        </footer>
      </div>
</body>